<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>块元素与内敛元素</title>

<style >

.title {
font-size: 30px;
background: darkgray;
}

h1 {
 color: blue;
}



/*
从右边渲染
*/
.divRight {

background: red;
height: 100px;
float:right;
margin-left: 10px;
}



/*img靠右*/
.rightImg {

float: right;
}

/*-------解决使用浮动后,父级图层没包裹的问题--------*/
.clearfix{
  *zoom:1;
}
/*:after 属于伪元素 , 一般用于行内元素 , 会在当前元素 添加content里面的内容 */
.clearfix:after{
  content: "";
  display: block;
  clear: both; /*左右两边不允许有浮动*/
}

</style>

  </head>

  <body>

<!--  -->
<p class="title">float(浮动) , 可以改变元素的渲染方向(from)</p>


<h1>改变渲染方向从右边开始</h1>

<div class="clearfix ">
  <div class="divRight">
    111111
  </div>
  <div class="divRight">
    222222
  </div>
</div>

<hr>

<!--  -->
<h1>文字围绕</h1>

<div class="clearfix">
  <img class="rightImg"  src="img/dg_smaill.jpg" alt="">
  <p>ajdjs jdls d s dshj  js d s jdsj  jdsj d sj jd sd sdjs jdj s jdsj dsj  dsds </p>
</div>

<!--  -->
<hr>
<h1>清除浮动</h1>

<div class="clearfix " >
  <div class="divRight" >
    111111
  </div>
  <div class="divRight" style="clear:right;">
    该元素右边不能有浮动元素
  </div>
</div>



<hr>


</body>
</html>
